<template>
    <div>
        <Category :showAttr="showAttr" />
        <el-card style="margin-top:10px">
            <div v-show="showAttr">
                <el-button type="primary" @click="addSpu" size="default" icon="Plus"
                    :disabled="categoryStore.c3Id ? false : true">添加SPU</el-button>
                <el-table style="margin:10px 0" border :data="records">
                    <el-table-column label="序号" type="index" align="center" width="120px"></el-table-column>
                    <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                    <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
                    <el-table-column label="SPU操作">
                        <!-- row  spu对象 -->
                        <template #="{ row, $index }">
                            <el-button type="primary" icon="Plus" size="small" title="添加SKU"
                                @click="addSku(row)"></el-button>
                            <el-button type="primary" icon="Edit" size="small" title="修改SPU"
                                @click="updateSpu(row)"></el-button>
                            <el-button type="primary" icon="View" size="small" title="查看SKU列表"
                                @click="findSku(row)"></el-button>
                            <el-popconfirm :title="`你确定删除${row.spuName}吗?`" width="200px" @confirm="removeSpu(row)">
                                <template #reference>
                                    <el-button type="primary" icon="Delete" size="small" title="删除当前SPU"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="pageNo" @current-change="getHasSpu(pageNo)"
                    v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]" :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="changeSize" />
            </div>
            <!-- 添加/修改Spu的子组件 -->
            <spuForm ref="SpuForm" v-show="!showAttr && !isSku" @changeSence="chanegSence" />
            <!-- 添加Sku的子组件 -->
            <skuForm ref="SkuForm" v-show="!showAttr && isSku" @changeSence="chanegSence" />
            <!-- 展示SKU的对话框 -->
            <el-dialog v-model="showDialog" title="SKU列表">
                <el-table border :data="skuArr">
                    <el-table-column label="SKU的名字" prop="skuName"></el-table-column>
                    <el-table-column label="SKU的价格" prop="price"></el-table-column>
                    <el-table-column label="SKU的重量" prop="weight"></el-table-column>
                    <el-table-column label="SKU的图片">
                        <template #="{ row, $index }">
                            <img :src="row.skuDefaultImg" alt="" style="width:100px ;height: 100px;">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>
<script setup lang='ts'>
//引入子组件
import spuForm from './spuForm.vue'
import skuForm from './skuForm.vue'
import { ref, watch, onBeforeUnmount } from 'vue'
//引入获取数据的函数
import { reqHasSpu, getSkuList, deleteSpu } from '@/api/product/spu/index'
//引入返回值的接口类型
import type { HasSpuResponseData, Records, SkuData, SpuData } from '@/api/product/spu/type'
//引入分类仓库
import useCateGoryStore from '@/store/modules/category';
import { ElMessage } from 'element-plus';
//实例化仓库
let categoryStore = useCateGoryStore()
//场景数据
let showAttr = ref<boolean>(true);
//显示spu还是sku
let isSku = ref<boolean>(false)
//分页器页码
let pageNo = ref<number>(1);
//单页条数
let pageSize = ref<number>(3);
//数据总条数
let total = ref<number>(0);
//定义一个数据用于控制对话框的显示隐藏
let showDialog = ref<boolean>(false)

//获取子组件实例skuForm
let SpuForm = ref<any>()
//获取子组件实例spuForm
let SkuForm = ref<any>()
//存储获取到的已有spu的数组
let records = ref<Records>([])
//存储全部的SKU的数据
let skuArr = ref<SkuData[]>([])

//监听三级分类的选择变化
watch(() => categoryStore.c3Id, () => {
    if (categoryStore.c3Id) {
        getHasSpu()
    } else {
        return;
    }
})
//获取指定三级分类下的数据
const getHasSpu = async (paper = 1) => {
    //修改当前页码
    pageNo.value = paper;
    let result: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
    if (result.code == 200) {
        records.value = result.data.records;
        total.value = result.data.total;
        console.log(records.value)
    } else {
        console.log('获取失败')
    }
}
//分页器下拉菜单变化时,再次获取数据
const changeSize = async () => {
    getHasSpu()
}
//添加SPU的回调函数
const addSpu = () => {
    showAttr.value = false;
    isSku.value = false;
    //调用子组件的添加方法
    SpuForm.value.initAddSpu(categoryStore.c3Id)
}
//传递给子组件的函数
const chanegSence = (obj: any) => {
    showAttr.value = true;
    isSku.value = obj.boo;
    //再次获取全部的SPU
    if (obj.params == 'update') {
        getHasSpu(pageNo.value)
    } else {
        getHasSpu()
    }
}

//更新SPU的回调函数
const updateSpu = (row: SpuData) => {
    showAttr.value = false;
    isSku.value = false;
    SpuForm.value.initHasSpuData(row)
}
//
watch(() => pageNo.value, () => {
    getHasSpu(pageNo.value)
})
//添加SKU的回调
const addSku = (row: SpuData) => {
    //切换场景
    showAttr.value = false;
    isSku.value = true;
    //点击按钮时调用子组件的方法获取数据
    SkuForm.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}
//查看sku的回调
const findSku = async (row: SpuData) => {
    let result = await getSkuList(row.id as number);
    if (result.code == 200) {
        skuArr.value = result.data;
        console.log(skuArr.value)
        showDialog.value = true
        ElMessage({
            type: 'success',
            message: '获取成功'
        })
    }
}
//删除已有spu按钮的回调
const removeSpu = async (row: SpuData) => {
    let result = await deleteSpu(row.id as number)
    if (result.code == 200) {
        ElMessage({
            type: "success",
            message: '删除成功',
        })
        getHasSpu(records.value.length > 1 ? pageNo.value : pageNo.value - 1)
    } else {
        ElMessage({
            type: "error",
            message: '删除失败',
        })
    }
}
//销毁组件时清空数据
onBeforeUnmount(() => {
    categoryStore.$reset();
})
</script>
<style lang='scss' scoped></style>
